<template>
    <div>
        <el-container class="box" :style="{ height: h + 'px' }">
            <el-header class="image-header">
                <el-button type="primary" @click="addGalleryHandler">增加图库分类</el-button>
                <el-button type="warning" @click="uploadHandler">上传图库</el-button>
            </el-header>
            <el-container style="width:100%;height:100%">
                <!-- 导航 -->
                <gallery-aside @change="changeHandler"></gallery-aside>
                <el-main class="image-main">
                    <!-- 主体内容 -->
                    <gallery-main ref="galleryClassRef"></gallery-main>
                </el-main>
            </el-container>
        </el-container>
        <drawer ref="drawerHtml" :closeOnPress="true" :closeButton="true">
            <template #top>
                <h3>增加图库分类</h3>
            </template>
            <template #content>
                <el-form :model="form" label-width="120px" class="form">
                    <el-form-item label="相册名称">
                        <el-input v-model="form.input" placeholder="Please input" />
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input-number v-model="form.num" :min="1" :max="50" controls-position="right" size="large" />
                    </el-form-item>
                </el-form>
            </template>
            <template #bottom>

                <el-button type="primary" @click="submit">提交</el-button>
                <el-button type="default" @click="cancelHandler">取消</el-button>
            </template>
        </drawer>
    </div>
</template>
<script setup lang='ts'>
import galleryAside from '@/components/galleryAside.vue'
import galleryMain from '@/components/galleryMain.vue'
import { ref, reactive } from 'vue'
import type { addGalleryForm } from '@/config/gallery'
import { addGalleryClassApi, } from '@/api/gallery'
import { ElMessage } from 'element-plus'
// 引入抽屉
import drawer from '@/components/drawer.vue'
const windowHeight = window.innerHeight || document.body.clientHeight
const h = windowHeight - 50 - 44 - 40

const drawerHtml = ref()

const galleryClassRef = ref()


const addGalleryHandler = () => {
    drawerHtml.value.kai()
}

const form: addGalleryForm = reactive({
    input: '',
    num: 0,
})

// 提交
const submit = async () => {
    const res = await addGalleryClassApi(form.input, form.num)
    if (res.data.msg === 'ok') {
        ElMessage({
            message: '提交成功.',
            type: 'success',
        })
        drawerHtml.value.guan()
        form.input = ''
        form.num = 0
    } else {
        ElMessage({
            message: '提交失败',
            type: 'warning'
        })
    }
}


const cancelHandler = () => {
    drawerHtml.value.guan()
    form.input = '',
        form.num = 0
}

// 获取id
const changeHandler = (id: number) => {
    galleryClassRef.value.loadData(id)

}

// 上传图片抽屉
const uploadHandler = () => {
    galleryClassRef.value.drawerHandler()
}
</script>
<style lang='scss' scoped>
.box {
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    padding: 0 10px;

    .image-header {
        background-color: antiquewhite;
        display: flex;
        align-items: center;
    }

    .image-main {
        padding: 0;
        position: relative;
    }
}

.form {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    >.el-input {
        width: 300px;

    }

    >.el-input-number {
        margin-top: 100px;
    }
}
</style>